<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p mv-text="name"></p>
        <p mv-text="name"></p>
        <p mv-text="name"></p>
        <p mv-text="name"></p>
        <p mv-text="name"></p>
        <p mv-text="name"></p>
    </div>
    <script>
        // ES5中对象可控变量属性定义(数据劫持)
        let user={
            age:23
        };
        // user.name="alice";
        // user["name"]="cici";

        // Object.defineProperty(target,属性名,配置)
        // target：操作的目标对象
        // 属性名：被操作的属性名
        // 配置：属性特性的配置(可修改、可循环、可删除)
        Object.defineProperty(user,"name",{
            value:"tom",//value属性不能和get、set同时出现
            enumerable:false//是否可被遍历
        });
        console.log(user);
        for(let key in user){
            console.log(key,user[key]);
        }
        let stu={
            //程序员直接约定_开头的变量为私有变量，不建议外部调用
            _name:"刘根宏"
        };
        Object.defineProperty(stu,"name",{
            get(){//控制name的取值操作，当通过stu对象属性name进行赋值操作时候必须由该方法返回结果
                console.log("get方法被触发");
                return this._name;
            },
            set(val){//控制name的赋值操作，当通过stu对象属性name进行赋值操作时候，必须由该方法完成变量修改
                console.log("set方法被触发",val);
                this._name=val;
            }
        });
        stu.name="笑哈哈";//赋值操作
        console.log(stu);

        // ES6中class 构建数据劫持
        // 只需要在对应的属性方法前补充get和set关键字即可
        class Book{
            _name="默认值";
            _root=null;
            constructor(options={}){
                this._root=document.querySelector(options.el);
            }
            get name(){
                return this._name;
            }
            set name(val){
                let tempList=this._root.querySelectorAll("[mv-text='name']");//集合
              
                tempList.forEach(dom => {
                    dom.innerHTML=val;
                });
                this._name=val;
            }

        }
        let book=new Book({
            el:"#app"
        });
        book.name="哈哈哈";//赋值操作

    </script>
</body>
</html>